<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>线上课堂</title>
    <!-- css 文件 -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
    <link rel="stylesheet" href="./css/base.css">
    <!-- jQuery 库 -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- JavaScript 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/foundation.min.js"></script>
    <!-- modernizr.js 文件 -->
    <script src="http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

</head>
<body>

    <style>
       .newscontent{max-width: 1440px;font-size:0;}
       .newsitem{width:20%;padding:10px;box-sizing: border-box;display: inline-block;vertical-align: top;}
       .newsimg{width:100%;background:#333;    transition: all .5s;}
       .newsitem:hover .newsimg{transform: scale(1.1);}
       .nsimgcontent{overflow: hidden;}
       .newsnr{background:#fff;padding:.6rem;}
       .newsnr h4{font-size:1rem;font-weight: bold;}
       .newsnrsl{font-size:.6rem;color:#777;margin:1rem 0;}
       .newsfbtime{color:#777;font-size:10px;margin:0;}
       .newspagebg{background:#fff;width:100%;height:100%;padding:1rem;position:relative;height:21rem;}
       .pagetab{position: absolute;bottom:1rem;left:1rem;}
       .pagetab a{border:solid 1px #333;color:#333;padding:10px 8px;display: inline-block;margin-right:15px;font-size:14px;}
       .pagetab a:hover{background:#151765;color:#fff;}
       .newspagetitle h4{font-size:1.2rem;font-weight: bold;border-bottom:solid 2px #333;display: inline;padding-bottom:5px;}
       .newspagetitle  p{margin-top:10px;font-size:.8rem;}
       .newscontents{background:#fff;height:21rem;}
    </style>
    <div class="nrheadtablink">
        <a href="" class="active">校园时光</a>
        <a href="">招生新闻</a>
        <a href="">教学成果</a>
        <a href="">艺考资讯</a>
    </div>
    <div class="row newscontent">
        <div class="newsitem">
            <div class="newspagebg">
                <div class="newspagetitle">
                    <h4>校园时光</h4>
                    <p>XYSG</p>
                </div>
                <div class="pagetab">
                    <a href=""><<<</a><a href="">>>></a>
                </div>
            </div>
        </div>
        <a href="" class="newsitem">
            <div class="newscontents">
                <div class="nsimgcontent">
                    <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                </div>
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
                <div class="newscontents">
                    <div class="nsimgcontent">
                        <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                    </div>
                    <div class="newsnr">
                        <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                        <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                        <p class="newsfbtime">2019-01-01</p>
                    </div>  
                </div>          
            </a>
            <a href="" class="newsitem">
                <div class="newscontents">
                <div class="nsimgcontent">
                    <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                </div>
                    <div class="newsnr">
                        <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                        <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                        <p class="newsfbtime">2019-01-01</p>
                    </div>  
                </div>          
            </a>
            <a href="" class="newsitem">
            <div class="newscontents">
                    <div class="nsimgcontent">
                            <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                        </div>
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
            <div class="newscontents">
                    <div class="nsimgcontent">
                            <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                        </div>
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
            <div class="newscontents">
                    <div class="nsimgcontent">
                            <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                        </div>
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
        <a href="" class="newsitem">
            <div class="newscontents">
                    <div class="nsimgcontent">
                            <img class="newsimg" width="100%" src="./img/img3.png" alt="">
                        </div>
                <div class="newsnr">
                    <h4>新闻标题新闻标题新闻标题新闻标题</h4>
                    <p class="newsnrsl">新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述新闻描述</p>
                    <p class="newsfbtime">2019-01-01</p>
                </div>  
            </div>          
        </a>
    </div>
    
</body>
</html>